import React, { PropTypes } from 'react';
import 'expose?Tether!tether';
import 'imports?jQuery=jquery,Tether=tether!semantic-ui/dist/semantic.min.js';
import 'semantic-ui/dist/semantic.min.css';
import './index.scss'


export default class CardOne extends React.Component {
    static defaultProps = {
            photo: "yeoman.png",
            title:'我的自画像',
            position:'惠州',
            content:'心情非常好，非常好，非常好，重要的事情说三遍',
            time:Date(),
            like:'120',
            likeStyle:true,
    }

    static PropTypes = {
        photo: PropTypes.string,
        title: PropTypes.string,
        position: PropTypes.string,
        content: PropTypes.string,
        time: PropTypes.object,
        like: PropTypes.string,
        likeStyle: PropTypes.bool,
    }

    constructor(props) {
        super(props);
        this.state= {
            photo: props.photo,
            title: props.title,
            position: props.position,
            content: props.content,
            time: props.time,
            like: props.like,
            likeStyle: props.likeStyle,
        };
        this.likeClick = this.clickLike.bind(this);
        this.imgClick = this.clickImg.bind(this);
    }
//todo 加入图片点击放大浏览时间用 semantic-ui的dimmer完成
    clickLike() {
        if(this.state.likeStyle){
            this.setState({like:Number(this.state.like) + 1});
            return this.setState({likeStyle:false});
        }
    };
    clickImg(){

    };


    render() {
        const {
            cardConfig,
            photo,
            title,
            position,
            content,
            time,
            like,
            likeStyle,
        } = this.props;

               
        return (
            <div className="card">
                <div 
                    className="image"
                    onClick= {this.imgClick}
                >
                    <img className="cardOne-img" src={'../images/'+photo} alt="photo"/>
                </div>
                <div className="content">
                    <div className="header">{title}</div>
                    <div className="meta">
                        <span>{position}</span>
                    </div>
                    <div className="description">{content}</div>
                </div>
                <div className="extra content">
                    <span className="right floated">{time}</span>
                    <span
                        onClick= {this.likeClick}
                    >
                        <i
                            className={!this.state.likeStyle?'thumbs up icon':'thumbs outline up icon'}
                        />
                        {this.state.like}
                    </span>
                </div>
            </div>
        ) 
    }
}
 

